import { McpToolsInfo } from '@/typings/mcp';
import { cn } from '@/lib/utils';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export function ToolsList({ lists }: { lists?: McpToolsInfo[] }) {
  return (
    <div className={cn('flex flex-col w-full min-h-0')}>
      <ScrollArea className={cn('scroll h-full')}>
        <div className={cn('pr-4 h-full')}>
          {lists?.map((item) => (
            <Card key={item.name} className={cn('mb-2 gap-0 py-4')}>
              <CardHeader className={cn('pb-0')}>
                <CardTitle className={cn('text-lg font-medium truncate')} title={item.name}>
                  {item.name}
                </CardTitle>
              </CardHeader>
              <CardContent className={cn('pt-0')}>
                <div className={cn('text-xs text-gray-500 line-clamp-3')} title={item.description}>
                  {item.description}
                </div>
              </CardContent>
            </Card>
          ))}

          {!lists ||
            (lists.length === 0 && (
              <div
                className={cn(
                  'flex items-center justify-center h-full py-10',
                  'text-gray-500 italic'
                )}
              >
                暂无数据
              </div>
            ))}
        </div>
      </ScrollArea>
    </div>
  );
}
